<template>
  <div class="chapter-navigator" :class="{ collapsed }">
    <div class="nav-header">
      <h3 class="nav-title">章节目录</h3>
      <el-button text size="small" @click="$emit('close')" class="close-btn" v-if="isMobile">关闭</el-button>
    </div>
    <el-scrollbar class="chapters-scroll">
      <ul class="chapters">
        <li
          v-for="ch in chapters"
          :key="ch.id"
          :class="['chapter-item', { active: ch.id === activeChapterId }]"
          @click="selectChapter(ch.id)"
        >
          <div class="chapter-line">
            <span class="chapter-index">第 {{ ch.id }} 章</span>
            <span class="chapter-title" :title="ch.title">{{ ch.title }}</span>
          </div>
          <ul class="sections" v-if="ch.sections && ch.sections.length && ch.id === activeChapterId">
            <li
              v-for="(sec, sIndex) in ch.sections"
              :key="sIndex"
              :class="['section-item', { active: sIndex === activeSectionIndex }]"
              @click.stop="selectSection(ch.id, sIndex)"
            >
              <el-icon class="dot"><i-ep-caret-right /></el-icon>
              <span class="section-title" :title="sec.title">{{ sec.title }}</span>
            </li>
          </ul>
        </li>
      </ul>
    </el-scrollbar>
  </div>
</template>

<script setup>
import { computed } from 'vue'
// queueMicrotask 兼容（若运行环境不支持，可回退 setTimeout 0）
if (typeof queueMicrotask !== 'function') {
  window.queueMicrotask = (cb) => Promise.resolve().then(cb)
}

const props = defineProps({
  chapters: { type: Array, default: () => [] },
  activeChapterId: { type: Number, default: null },
  collapsed: { type: Boolean, default: false },
  activeSectionIndex: { type: Number, default: null }
})
const emit = defineEmits(['select', 'select-section', 'close'])

const isMobile = computed(() => window.innerWidth < 760)

function selectChapter(id) {
  emit('select', id)
}
function selectSection(chapterId, sectionIndex) {
  // 若切换章节与节同一点击，先发出章节选择再发节选择，便于父组件串行处理
  if (chapterId !== props.activeChapterId) {
    emit('select', chapterId)
    // 微任务后再发节，避免父组件还未更新 currentChapterData
    queueMicrotask(() => emit('select-section', { chapterId, sectionIndex }))
  } else {
    emit('select-section', { chapterId, sectionIndex })
  }
}
</script>

<style scoped>
.chapter-navigator { width:300px; background:#ffffffd9; backdrop-filter: blur(6px); border:1px solid #e2e8f0; border-radius:14px; padding:14px 12px 18px; display:flex; flex-direction:column; box-shadow:0 4px 14px -4px rgba(0,0,0,.12); transition: transform .3s ease, opacity .3s ease; }
.chapter-navigator.collapsed { transform: translateX(-110%); opacity:0; pointer-events:none; }
.nav-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.nav-title { margin:0; font-size:16px; font-weight:600; letter-spacing:1px; color:#2c3e50; }
.chapters-scroll { flex:1; }
.chapters { list-style:none; padding:0; margin:0; }
.chapter-item { padding:10px 10px 6px; border-radius:10px; cursor:pointer; transition: background .2s; position:relative; }
.chapter-item:hover { background:#f1f5f9; }
.chapter-item.active { background:#e6eef6; box-shadow:0 0 0 1px #c3d6e8 inset; }
.chapter-line { display:flex; flex-direction:column; gap:2px; }
.chapter-index { font-size:12px; color:#5c6d79; }
.chapter-title { font-size:14px; font-weight:500; color:#2d3f51; line-height:1.3; }
.sections { list-style:none; margin:6px 0 0 0; padding:0 0 4px 4px; border-left:2px solid #cfd8e3; }
.section-item { font-size:12px; padding:4px 4px 4px 2px; display:flex; align-items:center; gap:4px; color:#5b6b77; border-radius:6px; cursor:pointer; }
.section-item.active { background:#e2ebf4; color:#2c3e50; font-weight:500; }
.section-item:hover { background:#edf2f7; }
.section-item .dot { font-size:12px; color:#70808c; }
.section-item:hover { color:#2c3e50; }
@media (max-width: 960px) { .chapter-navigator { width:260px; position:fixed; left:10px; top:80px; z-index:30; } }
</style>
